<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<view class="merchant-detail-trade-record-top">
				<view class="merchant-detail-trade-record-card">
					<text>累计总交易(元)</text>
					<text class="merchant-detail-trade-record-card-money">{{totalAmount}}</text>
				</view>
				<view class="merchant-detail-trade-record-date" @tap="showSelectDate">
					<text>{{dayjs(selectDateValue).format('YYYY年MM月')}}</text>
					<xh-icon icon="icon_shanglajiantou"></xh-icon>
				</view>
			</view>
		</template>
		<view class="order-list">
			<view class="order-list-item" v-for="item in dataList" :key="item.oderId" @tap="showOrderInfo(item)">
				<view class="order-list-item-left">
					<text>{{item.type}}</text>
					<text class="order-list-item-left-space">{{item.oderId}}</text>
					<text class="order-list-item-left-space">{{item.dateTime}}</text>
				</view>
				<view class="order-list-item-right">
					<text>¥{{item.amount}}</text>
					<xh-icon icon="icon_jiantou"></xh-icon>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<uv-datetime-picker ref="datePickerRef" v-model="selectDateValue" mode="year-month" @confirm="confirm"></uv-datetime-picker>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import { getTradeOrderMonthStatistics, getTradeOrderList } from '@/common/api/api.js'
	import { page } from '@climblee/uv-ui/libs/function'

	const props = defineProps(['merId'])

	const datePickerRef = ref(null)
	const pagingRef = ref(null)
	const selectDateValue = ref(Number(new Date()))
	const dataList = ref([])
	const totalAmount = ref(0)
	// 选择日期
	const showSelectDate = () => {
		datePickerRef.value.open()
	}
	// 日期选择回调
	const confirm = (res) => {
		selectDateValue.value = res.value
		pagingRef.value.reload()
	}
	//订单详情
	const showOrderInfo = (item) => {
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/home/order-search/order-detail/order-detail?type=0&data=${data}`
		})
	}
	// 获取月统计金额
	const getMonthTotalAmount = async () => {
		let params = {}
		params.dateType = '1'
		params.merId = props.merId
		const date = dayjs(selectDateValue.value).format('YYYY-MM')
		params.startDate = date
		params.endDate = date
		const res = await getTradeOrderMonthStatistics(params)
		totalAmount.value = res.result.totalAmount

	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		if (pageNo == 1) {
			getMonthTotalAmount()
		}
		let params = {}
		params.dateType = '1'
		params.merId = props.merId
		const date = dayjs(selectDateValue.value).format('YYYY-MM')
		params.startDate = date
		params.endDate = date
		const res = await getTradeOrderList(params, pageNo)
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.merchant-detail-trade-record-top {
		padding: 30rpx 30rpx 0;

		.merchant-detail-trade-record-card {
			background-image: url('/static/operate/yy_byjy_bg@2x.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 16rpx;
			padding: 30rpx;

			.merchant-detail-trade-record-card-money {
				font-size: 64rpx;
				margin-top: 16rpx;
			}
		}

		.merchant-detail-trade-record-date {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
		}
	}

	.order-list {
		background-color: #fff;

		.order-list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			position: relative;

			.order-list-item-left {
				display: flex;
				flex-direction: column;
				font-size: 26rpx;

				.order-list-item-left-space {
					margin-top: 16rpx;
				}
			}
			.order-list-item-right {
				font-size: 26rpx;
				color: $xh-orange-color;
			}
		}
	}
</style>